// 引入uni-app内置样式变量
@import '@/uni_modules/uni-scss/variables.scss';

// 基础样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

page {
  background-color: #f5f5f5;
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
}

// 常用颜色变量
$color-primary: #007aff; // 主题色
$color-success: #4CAF50; // 成功色
$color-warning: #FF9800; // 警告色
$color-danger: #F44336; // 危险色
$color-gray: #9E9E9E; // 灰色
$color-light-gray: #EEEEEE; // 浅灰色
$color-text: #333333; // 主要文本色
$color-text-secondary: #666666; // 次要文本色
$color-text-tertiary: #999999; //  tertiary文本色

// 常用字体大小
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;

// 常用间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

// 圆角
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 16px;
$radius-full: 9999px;

// 阴影
$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
$shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);

// 通用样式类
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.flex-1 {
  flex: 1;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mt-xs {
  margin-top: $spacing-xs;
}

.mt-sm {
  margin-top: $spacing-sm;
}

.mt-md {
  margin-top: $spacing-md;
}

.mt-lg {
  margin-top: $spacing-lg;
}

.mb-xs {
  margin-bottom: $spacing-xs;
}

.mb-sm {
  margin-bottom: $spacing-sm;
}

.mb-md {
  margin-bottom: $spacing-md;
}

.mb-lg {
  margin-bottom: $spacing-lg;
}

.ml-xs {
  margin-left: $spacing-xs;
}

.ml-sm {
  margin-left: $spacing-sm;
}

.ml-md {
  margin-left: $spacing-md;
}

.ml-lg {
  margin-left: $spacing-lg;
}

.mr-xs {
  margin-right: $spacing-xs;
}

.mr-sm {
  margin-right: $spacing-sm;
}

.mr-md {
  margin-right: $spacing-md;
}

.mr-lg {
  margin-right: $spacing-lg;
}

.p-xs {
  padding: $spacing-xs;
}

.p-sm {
  padding: $spacing-sm;
}

.p-md {
  padding: $spacing-md;
}

.p-lg {
  padding: $spacing-lg;
}

.bg-white {
  background-color: #ffffff;
}

.bg-gray {
  background-color: $color-light-gray;
}

.text-primary {
  color: $color-primary;
}

.text-success {
  color: $color-success;
}

.text-warning {
  color: $color-warning;
}

.text-danger {
  color: $color-danger;
}

.text-gray {
  color: $color-gray;
}

.font-xs {
  font-size: $font-size-xs;
}

.font-sm {
  font-size: $font-size-sm;
}

.font-md {
  font-size: $font-size-md;
}

.font-lg {
  font-size: $font-size-lg;
}

.font-xl {
  font-size: $font-size-xl;
}

.radius-sm {
  border-radius: $radius-sm;
}

.radius-md {
  border-radius: $radius-md;
}

.radius-lg {
  border-radius: $radius-lg;
}

.radius-full {
  border-radius: $radius-full;
}

.shadow-sm {
  box-shadow: $shadow-sm;
}

.shadow-md {
  box-shadow: $shadow-md;
}

.shadow-lg {
  box-shadow: $shadow-lg;
}

// 解决底部安全区问题
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

// 解决顶部状态栏问题
.status-bar-height {
  height: var(--status-bar-height);
}
